<template>
    <transition enter-active-class="animated fadeIn" leave-active-class="animated fadeOut">
        <div v-show="visible" class="cart-wrapper" @click="toggleList">
            <div class="cart-icon icon-shopping_cart" :class="{highlight: total.price>0}">
                <bubble :number="total.count" :style="{top: '-4px', right: '-4px'}"></bubble>
            </div>
            <div class="cart-amount" :class="{highlight: total.price>0}">￥{{total.price}}</div>
            <div class="cart-deliver">i</div>
            <div class="cart-price"></div>
        </div>

    </transition>
</template>

<script>
    import Bubble from '../bubble/bubble'
    import popup from '../../common/mixins/popup'
    export default {
        mixins: [popup],
        name: "shopCart",
        props:{
            data: Array,
        },
        components:{
            Bubble,
        },
        computed:{
            selectedFoods(){
                let ret= [];
                this.data.forEach((goods)=>{
                    goods.foods.forEach((food)=>{
                        if(food.count)
                            ret.push(food)
                    })
                })
                console.log(ret)
                return ret;
            },
            total(){
                let price=0
                let count=0
                this.selectedFoods.forEach((food)=>{
                    price+= food.count* food.price
                    count+= food.count
                })
                if(count===0&& this.shopCartList)
                    this.shopCartList.hide()
                return {price: price, count: count};
            },
        },
        methods:{
            toggleList(){
                this.shopCartList= this.shopCartList|| this.$createShopCartList({
                    $props:{
                        selectedFoods: 'selectedFoods',
                    }
                })
                this.shopCartList.toggle()
            },
        },
        mounted() {
            bus.$on('msg_changeTab', (index, name)=>{
                this.visible= index===0
                console.log('name-> '+ name)
            })
        }
    }
</script>

<style scoped lang="stylus">
    @import '~common/stylus/variable.styl'
    .cart-wrapper
        position: absolute              /*这里调用 createAPI 创建本组件，可以简单解决层次关系*/
        bottom:0
        width:100%
        height:48px
        z-index: 101                    /*本行确保本组件可以置于 shopCartList 组件的上方*/
        background-color: $color-background

        display: flex
        justify-content: flex-start     /*水平位置*/
        align-items:center              /*垂直位置*/

        color: $color-light-grey
        padding-left: 80px
        .cart-icon
            line-height: 44px
            text-align: center
            position: absolute
            z-index: 1
            bottom: 2px
            left: 12px
            width: 56px
            height: 56px
            box-sizing: border-box
            border-radius: 50%
            background-color: $color-dark-grey
            border: 6px solid $color-background
            font-size: $fontsize-large-xxx
            color: $color-light-grey
            &.highlight
                background-color: $color-blue
                color: $color-white
        .cart-amount
            font-weight: bold
            &.highlight
                color: $color-white
</style>